<script lang="js" setup name="SeriesBar">
import { ref, reactive, computed, getCurrentInstance } from "vue";
import SeriesItem from "./SeriesItem.vue";
import { useArchiveStore } from "../stores/archive";
import { useAppStore } from "../stores/appStore";
import { IsPhone } from "../utils";
import XMenu from "./XMenu/XMenu.vue";

const instance = getCurrentInstance();
const archiveStore = useArchiveStore();
const appStore = useAppStore();
const seriesItemRefs = reactive([]);
const domWidth = ref(146);
const xMenu = ref(null);
const menuItems = reactive([
    { label: "折叠显示"},
    { label: "平铺显示"},
    { label: "按日期排序"},
    { label: "按序号排序"},
]);

const menuList = reactive([
    { text: "折叠显示", id: "fold" },
    { text: "平铺显示", id: "tile" },
    { text: "按日期排序", id: "sortbydate" },
    { text: "按序号排序", id: "sortbynumber" },
]);


const navClass = computed(() => {
    return IsPhone() ? "navigationbar-phone"
            : appStore.navbarPos === "left"
            ? "navigationbar"
            : "navigationbar-phone";
});

const navStyle = computed(() => {
    if (appStore.navbarPos === "bottom") {
        // console.log("SeriesBar.setWidth, width:", width);
        return {
            width: domWidth.value + "px",
        }
    } else {
        return {};
    }
});

const onScroll = (e) => {
    const el = instance.proxy.$el;
    if (navClass.value === "navigationbar-phone" && el.scrollWidth > el.clientWidth) {
        el.scrollBy(e.deltaY, 0);
    }
};

const getItemRef = (el, idx) => {
    if (el) {
        seriesItemRefs[idx] = el;
    }
};

const onSelected = ({pos}) => {
    for (let i = 0; i < seriesItemRefs.length; i++) {
        if (i === pos) {
            seriesItemRefs[i].setSelected(true);
        } else {
            seriesItemRefs[i].setSelected(false);
        }
    }
};

const onDblClick = ({pos}) => {
};

const setWidth = (width) => {
    domWidth.value = width;

};

const showMenu = (e) => {
    // console.log("SeriesBar.showMenu, e:", e);
    xMenu.value.show(menuList, { left: e.clientX, top: e.clientY });
};
const hideMenu = () => {
    xMenu.value.hide();
};

defineExpose({
    setWidth
});
</script>

<template>
	<div class="navbar" @contextmenu.prevent="showMenu">
		<XMenu ref="xMenu" :menu="menuItems" @mouseleave="hideMenu" />
		<div :class="navClass" :style="navStyle" @mousewheel.stop="onScroll">
			<SeriesItem
				v-for="(series, idx) in archiveStore.seriesList"
				:key="series.seriesInsUid"
				:ref="el => getItemRef(el, idx)"
				:series="series"
				:pos="idx"
				@selected="onSelected"
				@dblclick="onDblClick"
			/>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.navbar {
	height: 100%;
}
.navigationbar {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 2px 1px;
	font-size: 1.2rem;
	flex-shrink: 0;
}

.navigationbar-phone {
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 100%;
	white-space: nowrap;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 1px 2px;
	font-size: 1.2rem;
}
</style>
